
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>首页</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="/plugins/select2/select2.min.css">
  <link rel="stylesheet" href="/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
  <link rel="stylesheet" href="/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">

<!-- daterange picker -->
<link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css">
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="/plugins/datepicker/datepicker3.css">

  <!-- Theme style -->
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/skin-blue.min.css">

  <link href="/bootstrap-fileinput/css/fileinput.css" media="all"rel="stylesheet" type="text/css" />

  <!-- <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.css"> -->
  <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  
   
  <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script src="/bootstrap-fileinput/js/plugins/sortable.js"></script>
  <script src="/bootstrap-fileinput/js/plugins/purify.js"></script>
  <script src="/bootstrap-fileinput/js/plugins/piexif.js"></script>
  <script src="/bootstrap-fileinput/js/fileinput.js"type="text/javascript"></script>
  <script src="/bootstrap-fileinput/js/locales/zh.js"type="text/javascript"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>

  <script src="/dist/js/app.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
  <script src="/bootstrap/js/bootstrapValidator.js"></script>
  <script src="/plugins/select2/select2.full.min.js"></script>
  <script src="/url.js"></script>
  
  <script src="/plugins/sweetalert2/sweetalert2.min.js"></script>
  <!-- <script src="/plugins/datatables/jquery.dataTables.js"></script> -->
  <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <!-- <script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
  <!-- bootstrap datepicker -->
  <script src="/plugins/datepicker/bootstrap-datepicker.js"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <%- include('./header.html') %>

  <%- include('./menu.html') %>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        义不容辞之事，当无怨无悔
        <small>乐乐的每日一句</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 文章管理</a></li>
        <li class="active">创建文章</li>
      </ol>
    </section>
  <section class="content">
  <div class="box box-info">
      <div class="box-header with-border">
          <h3 class="box-title">2019年创作文章分布趋势折线图</h3>
          <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div>
      </div>
     
      <div class="box-body">
          <div id="echartcontainer" style="height: 500px"></div>
      </div>
      
  </div>
  <div class="box box-info">
      <div class="box-header with-border">
          <h3 class="box-title">2019年创作文章分布总量柱状图</h3>
          <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div>
      </div>
     
      <div class="box-body">
          <div id="containers" style="height: 500px"></div>
      </div>
      
  </div>
  
  <script type="text/javascript">
  var dom = document.getElementById("echartcontainer");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
  title: {
   text: ''
  },
  tooltip: {
   trigger: 'axis'
  },
  legend: {
   data:['科技','新闻','百科','互联网','随笔']
  },
  grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
  },
  toolbox: {
   feature: {
       saveAsImage: {}
   }
  },
  xAxis: {
   type: 'category',
   boundaryGap: false,
   data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  },
  yAxis: {
   type: 'value'
  },
  series: [
   {
       name:'科技',
       type:'line',
       stack: '总量',
       data:[12, 13, 10, 13, 9, 23, 21,15,25,16,35,29]
   },
   {
       name:'新闻',
       type:'line',
       stack: '总量',
       data:[22, 18, 19, 23, 29, 33, 31,15,25,16,35,29]
   },
   {
       name:'百科',
       type:'line',
       stack: '总量',
       data:[15, 23, 20, 15, 19, 33, 41,15,25,16,35,29]
   },
   {
       name:'互联网',
       type:'line',
       stack: '总量',
       data:[32, 33, 30, 33, 39, 33, 32,15,25,16,35,29]
   },
   {
       name:'随笔',
       type:'line',
       stack: '总量',
       data:[82, 93, 90, 93, 129, 13, 13,15,25,16,35,29]
   }
  ]
  };
  ;
  if (option && typeof option === "object") {
          myChart.setOption(option, true);
  }
  
  
  
  
  var dom = document.getElementById("containers");
  var myChart1 = echarts.init(dom);
  var app = {};
  options = null;
  options = {
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              data : ['科技', '新闻', '百科', '互联网', '随笔'],
              axisTick: {
                  alignWithLabel: true
              }
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      series : [
          {
              name:'创作数量',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390, 330, 220]
          }
      ]
  };
  ;
  if (options && typeof options === "object") {
      myChart1.setOption(options, true);
  }
      </script>
  </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      Anything you want
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
  </footer>

  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->


<script src="/dist/js/app.min.js"></script>
<script>
$(function(){
        $('.sidebar-menu li:not(.treeview) > a').on('click', function(){
            var $parent = $(this).parent().addClass('active');
            $parent.siblings('.treeview.active').find('> a').trigger('click');
            $parent.siblings().removeClass('active').find('li').removeClass('active');
        });

        $(window).on('load', function(){
            $('.sidebar-menu a').each(function(){
                if(this.href === window.location.href){
                    $(this).parent().addClass('active')
                            .closest('.treeview-menu').addClass('.menu-open')
                            .closest('.treeview').addClass('active');
                }
            });
        });
    });</script>
</body>
</html>
